<template>
  <div>
    <div id="container"></div>
  </div>
  
</template>

<script>
import * as echarts from "echarts";
import "echarts-gl";
import mapJson from "@/assets/json/city";
export default {
  methods:{
    initMap() {
      const _t = this;
      let myChart = echarts.init(document.getElementById("container"));
      echarts.registerMap("myMap", { geoJSON: mapJson });
      myChart.showLoading();
      myChart.hideLoading();
      var option = {
        series: [
          {
            type: "map",
            name: "mymap",
            roam: false,
            map: "myMap",
            emphasis: {
              label: {
                show: true,
                color: "#fff"
              },
              itemStyle: {
                areaColor: "#0C274B"
              }
            },
            // selectedMode: "multiple", // 可多选区域
            selectedMode: "single", 
            itemStyle: {
              normal: {
                areaColor: "#0C274B",
                shadowColor: "#1F4890",
                shadowBlur: 2,
                shadowOffsetX: 10,
                shadowOffsetY: 15,
                borderColor: "#BCFCFF",
                borderWidth: 1
              },
              emphasis: {
                areaColor: "#711E8E"
              }
            },
            label: {
              normal: {
                //静态的时候展示样式
                show: true, //是否显示地图省份得名称
                //  formatter: '{c0}\n{b0}',
                textStyle: {
                  color: "#BCFCFF", // 区域文字 颜色
                  fontSize: 15,
                  fontFamily: "Arial"
                }
              },
              emphasis: {
                //动态展示的样式
                color: "#faf4f4", //选中区域的字体颜色
                show: true,
                textStyle: {
                  fontSize: 18,
                  fontFamily: "Arial"
                }
              }
            },

            // 选中状态下的多边形和标签样式
            select: {
              itemStyle: {
                areaColor: "#711E8E" //选中区域的背景色
              },
              label: {
                show: true,
                color: "#ffffff"
              }
            },
            data: [
              {
                name: "信都区",
                selected: true
              }
            ]
          }
        ]
      };

      myChart.setOption(option);
      window.addEventListener("resize", function() {
        myChart.resize();
      });
    }
  },
  mounted(){
    this.initMap();
  }
}
</script>

<style lang="scss" scoped>
#container {
  width: 100%;
  height: 900px;
}
a {
  color: blue;
}
span {
  color: blueviolet;
  font-weight: 700;
}
</style>